<!DOCTYPE html>
<html lang="zh_CN">
<head>
    <meta charset="UTF-8">
    <title>使用弹性盒子完成计算器案例</title>
</head>
<style>
    *{
        margin: 0;
        padding: 0;
    }
    input{
        border: none;
        border-bottom: 1px solid black;
    }
    .layout{
        display: flex;
        width: 149px;
        margin-top: 20px;
        flex-wrap: wrap;
        justify-content: space-between;
    }
    .layout .center{
        display: flex;
        width: 30px;
        height: 30px;
        border-radius: 15px;
        background-color: #999999;
        justify-content: center;
        align-items: center;
    }
</style>
<body>
<div id="app">
    <span>算式:</span><input type="text" v-model="suanshi"><br>
    <span>输入:</span><input type="text" v-model="scanner"><br>
    <span>结果:</span><input type="text" v-model="sum"><br>


    <div class="layout">
        <div class="center" @click="suanshu('c')">C</div>
        <div class="center" @click="suanshu('ce')">CE</div>
        <div class="center"></div>
        <div class="center"></div>
        <div class="center" @click="suanshu('1')">1</div>
        <div class="center" @click="suanshu('2')">2</div>
        <div class="center" @click="suanshu('3')">3</div>
        <div class="center" @click="he('+')">+</div>
        <div class="center" @click="suanshu('4')">4</div>
        <div class="center" @click="suanshu('5')">5</div>
        <div class="center" @click="suanshu('6')">6</div>
        <div class="center" @click="he('-')">-</div>
        <div class="center" @click="suanshu('7')">7</div>
        <div class="center" @click="suanshu('8')">8</div>
        <div class="center" @click="suanshu('9')">9</div>
        <div class="center" @click="he('*')">*</div>
        <div class="center" @click="he('/')">/</div>
        <div class="center" @click="suanshu('.')">.</div>
        <div class="center" @click="suanshu('0')">0</div>
        <div class="center" @click="he('=')">=</div>
    </div>
</div>
</body>
<script src="vue.global.js">
</script>
<script>
    Vue.createApp({
        data() {
            return{
                suanshi:'',
                scanner:'',
                sum:''
            }
        },
        methods:{
            suanshu(e){
                this.scanner+=e;
            },
            he(es){
                if(es!='='){
                    this.suanshi+=this.scanner+es;
                    this.scanner='';
                }
                else{
                    this.suanshi+=this.scanner
                    this.sum=eval(this.suanshi)
                }
            }
        }
    }).mount('#app')
</script>
</html>

